<template>
    <div class="container">
        <div class="box">
            <div class="common-layout">
                <el-container>
                    <el-header class="head">作者列表</el-header>
                    <el-main>
                        <el-table :data="currentData" style="width: 100%">
                            <el-table-column type="index" :index="indexMethod" />
                            <el-table-column prop="username" label="作者姓名" width="120" />
                            <el-table-column prop="count" label="文章数量" width="120" />
                            <el-table-column label="操作" width="150">
                                <!-- 插槽语法，default是一个具=具名插槽，表示默认插槽，scope表示插槽的作用域，用来提供上下文，下文中的按钮向这里传送 -->
                                <template #default="scope">
                                    <el-button size="large" type="primary" style="width:100px"
                                        @click="goToAuthorPage(scope.row.username)">进入文章管理</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="demo-pagination-block">
                            <div class="demonstration">修改页码</div>
                            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                :page-sizes="[5, 10, 20, 15]" :small="small" :disabled="disabled"
                                :background="background" layout="sizes, prev, pager, next" :total="total"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </el-main>
                </el-container>
            </div>
        </div>
        <div class="box">
            <div class="common-layout">
                <el-container>
                    <el-header class="head">作者发布文章统计图表</el-header>
                    <el-main>
                        <div id="bar-chart" style="width: 100%; height: 400px;"></div> <!-- 这里放置图表 -->
                    </el-main>
                </el-container>
            </div>
        </div>
    </div>
</template>

<script setup>
// 这里一般不需要写逻辑，除非你想加交互
//ref用来定义基本类型，reactive用来定义复杂类型，使用torefs可以将user对象的每个属性转换成独立的ref，并且你可以像使用ref一样使用它
//computed用来通过data计算，特点是响应式和懒加载，当依赖的数据发生变化时，才进行改变，
//mounted在组件被挂载到页面上的时候执行，此时你可以进行一些安全的与dom相关的操作，可以很好的实现异步操作，但是要记得处理好异步数据加载的逻辑
import { nextTick, ref, reactive, computed, onMounted } from 'vue';
//用来向后端发送axois请求
import axios from 'axios';
//引入echarts，用来渲染柱形图
import * as echarts from 'echarts';
//引入路由函数，用来跳转
import { useRouter } from 'vue-router';
//定义响应式数据
const total = ref(0);
const tableData = reactive([]);
const currentPage = ref(1);
const pageSize = ref(5);
const router = useRouter();
//异步，并且在组件渲染时使用一次
onMounted(async () => {
    try {
        const response = await axios.get('/api/articles/count/author');
        tableData.push(...response.data);
        total.value = tableData.length;

        // 调用渲染图表的方法
        renderBarChart(response.data);
    }
    catch (error) {
        console.error("数据请求失败:", error)
    }
});
//计算属性
const currentData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = currentPage.value * pageSize.value;
    return tableData.slice(start, end)
});

const indexMethod = (index) => {
    return index + 1
}

const handleSizeChange = (val) => {
    pageSize.value = val;
}
const handleCurrentChange = (val) => {
    currentPage.value = val;
}

const renderBarChart = (data) => {
    //根据id来找到要渲染到的地方
    const chartDom = document.getElementById('bar-chart');
    //是echarts库中的初始化方法，用于在提供dom元素中初始化一个图表实例，这个方法返回一个mychart对象
    const myChart = echarts.init(chartDom);
    //图标配置项
    const options = {
        title: {
            text: '作者文章数量统计',
        },
        // 图标提示框
        tooltip: {
            trigger: 'item',
        },
        //x轴设置
        xAxis: {
            type: 'category',
            data: data.map(item => item.username), // 假设数据中有 username
        },
        //y轴设置
        yAxis: {
            type: 'value',
        },
        //定义了图标的序列，一个序列代表组表，可以放在一起
        series: [
            {
                data: data.map(item => item.count), // 假设数据中有 count
                //代表柱形图
                type: 'bar',
            },
        ],
    }
    myChart.setOption(options);
}

const goToAuthorPage = (authorUsername) => {
    router.push({ name: 'author-page', params: { username: authorUsername } });
};

</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    align-self: center;
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    color: #000;
    align-items: center;
    margin-bottom: 16px;
}

.head {
    text-align: center;
    /* 水平居中 */
    font-size: 24px;
    /* 设置合理的字体大小 */
    font-weight: bold;
    /* 可选：加粗字体 */
    margin: 0;
    /* 可选：去掉上下的默认间距 */
    padding: 20px;
    /* 可选：设置内边距，给元素一些空间 */
    color: #000;
}

.container {
    /* 弹性布局，主轴默认水平 */
    display: flex;
    background-color: #f0f2f5;
    /* 内边距 */
    padding: 20px;
    /* 高度 */
    height: 80vh;
    box-sizing: border-box;
}

.box {
    /* 缩放1 */
    flex: 1;
    /* 距其他组件的边距 */
    margin: 10px;
    background-color: white;
    /* 边框 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    /*超出时候，自动添加滚动条  */
    overflow: auto;
}
</style>
